<template>
	<view class="u-page">
		<view class="u-demo-block">
			<text class="u-demo-block__title">基础使用</text>
			<view class="u-demo-block__content">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form labelPosition="left" :model="model1" ref="form1">
					<u-form-item label="手机号" prop="phone" borderBottom ref="item1" labelWidth="100">
						<u--input v-model="model1.phone" border="none" placeholder="请输入手机号"></u--input>
					</u-form-item>

					<u-form-item prop="code" labelWidth="80" borderBottom>
						<u--input v-model="model1.code" border="none" placeholder="请填写验证码"></u--input>
						<u-button slot="right" @tap="getCode" :text="tips" type="success" size="mini"
							:disabled="disabled1"></u-button>
					</u-form-item>

				</u--form>
				<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
				<!-- <u-button
					type="error"
					text="重置"
					customStyle="margin-top: 10px"
					@click="reset"
				></u-button> -->
				<u-code ref="uCode" @change="codeChange" seconds="20" @start="disabled1 = true"
					@end="disabled1 = false"></u-code>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login,
		send_message
	} from '@/common/api.js';
	export default {
		data() {
			return {
				disabled1:false,
				tips: '',
				model1: {
					phone: '',
					code: ''
				},
				rules: {
					code: [{
						required: false,
					}, {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// if(value==''){
							// 	return true
							// }else{

							// }
							return uni.$u.test.code(value, 4)
						},
						message: "验证码输入错误",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["blur"],
					}],
					phone: [{
						required: true,
						message: '手机号不能为空',
						trigger: ["change", "blur"],
					}, {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value)
						},
						message: "手机号输入错误",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["blur"],
					}]
				},
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			codeChange(text) {
				console.log(text)
				this.tips = text;
			},
			getCode() {
				let isphone = uni.$u.test.mobile(this.model1.phone)
				if (isphone == false) {
					uni.$u.toast('手机号不为空');
					return
				}

				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					let data = {
						params: {
							phone: this.model1.phone
						}
					}
					console.log(data)
					send_message(data).then((r) => {
						uni.hideLoading();
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					}).catch((err) => {
						console.log(err)
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}

			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					let data = {
						phone: this.model1.phone,
						code: this.model1.code,
						matchmakerUid: this.matchmakerUid
					}
					uni.showLoading({
						title: '登录中',
						mask: true
					})
					login(data, {
						custom: {
							auth: false,
							toast: false,
							catch: false
						}
					}).then((r) => {
						setTimeout(() => {
							uni.hideLoading()
						}, 2000)
						var pages = getCurrentPages(); //当前页
						if (pages.length == 1) {
							uni.switchTab({
								url: '/pages/index/index'
							})
						} else {
							uni.navigateBack({
								delta: 1,
								success: function() {
									let page = getCurrentPages().pop(); //跳转页面成功之后
									if (!page) return;
									uni.switchTab({
										url: '/pages/index/index'
									})
								}
							});
						}
						try {
							uni.setStorageSync('token', r.token)
						} catch (e) {
							//TODO handle the exception
						}
					}).catch((err) => {
						console.log(err)
					})
					// uni.$u.toast('校验通过')
				}).catch(errors => {
					console.log(errors)
					uni.$u.toast('校验失败')
				})
			},
			reset() {
				const validateList = ['userInfo.name', 'userInfo.sex', 'radiovalue1', 'checkboxValue1', 'intro',
					'hotel', 'code', 'userInfo.birthday'
				]
				this.$refs.form1.resetFields()
				this.$refs.form1.clearValidate()
				setTimeout(() => {
					this.$refs.form1.clearValidate(validateList)
					// 或者使用 this.$refs.form1.clearValidate()
				}, 10)
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		},
	}
</script>
<!-- <script>
  export default {
    data() {
      return {
        model: {
        	phone:'',
			tip:'',
        },
		
        value: ''
      }
    },
    watch: {
      value(newValue, oldValue) {
      }
    },
	onLoad() {
		try {
			uni.login({
				success: (res) => {
					let data = {
						xcx_code: res.code
					}
					
				}
			})
			if (uni.getStorageSync('wxuser') && uni.getStorageSync('wxuser').wxuser_phone != null) {
				
			}
		
		} catch (e) {
			
		}
	},
    methods: {
		getUserInfo(){
			
		},
      codeChange(text) {
        this.code = text;
      },
	  submit() {
	  	let isclick=true
	  	if(isclick){
	  		isclick=false
	  	}
	  	login(data, {
	  		custom: {
	  			auth: false,
	  			toast: false,
	  			catch: false
	  		}
	  	}).then((r) => {
	  		this.info = r
	  		this.isauth = true
	  	}).catch((err) => {
	  		console.log(err)
	  	})
	  },
      getCode() {
		  console.log(this.$refs.uCode.canGetCode)
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码'
          })
		  let data={
			  phone:this.phone
		  }
		  send_message(data).then((r) => {
		  	setTimeout(() => {
		  	  uni.hideLoading();
		  	  uni.$u.toast('验证码已发送');
		  	  this.$refs.uCode.start();
		  	}, 2000);
		  }).catch((err) => {
		  	console.log(err)
		  })
          
        } else {
          uni.$u.toast('倒计时结束后再发送');
        }
      },
      change(e) {
        console.log('change', e);
      }
    }
  }
</script> -->
<style lang="scss">
	.btn_login {
		background-color: #111111;
		color: #FFFFFF;
		border-radius: 44rpx;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
</style>
